<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <title>TECHO</title>
        <script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
        <link rel="stylesheet" type="text/css" href="resources/css/disenoPrincipal.css"/>
    </h:head>

    <h:body>
        <h:form>
            <p:layout fullPage="true">

                <p:layoutUnit position="north" size="120" resizable="false" closable="false" collapsible="false">
                    
                        <center>
                        <img  src="resources/img/logoTecho2.jpg" alt="Logo" width="625" height="100" />
                    </center>

                </p:layoutUnit>

                <p:layoutUnit position="south" size="50" closable="true" collapsible="true">

                </p:layoutUnit>

                <p:layoutUnit position="west" size="200" header="Sitios de Interes" style="font-size: 12px" collapsible="false">
                    <p:menu>
                        <p:submenu label="Recursos" >
                            <p:menuitem  value="Construcciones" ajax="false" immediate="true" action="GeorreferenciaConstrucciones.xhtml"  />
                            <p:menuitem value="Puntos de Emergencia" ajax="false" immediate="true" action="GeorreferenciaPuntoEmergencia.xhtml"/>
                            <p:menuitem value="Barrios"  ajax="false" immediate="true" action="GeorreferenciaBarrios.xhtml" />
                            <p:menuitem value="Otros" url="http://www.primefaces.org/themes.html" />

                        </p:submenu>

                    </p:menu>
                </p:layoutUnit>

                <p:layoutUnit position="center">

                    <br></br>
                    <center>
                        <h:form>
                            <p:growl id="login-growl" life="2000" globalOnly="true" showDetail="true"  />
                            <p:panel style="width: 100%; text-align: center; font-size: 14px; font-weight: bold"
                                     header="TECHO-FFICE - TECHO">
                                <p:panel header="Autenticación de Usuario" style="width: 40%; height: 50%; text-align: center;
                                         margin-left: 30%; font-size: 12px">
                                    <table width="90%" border="0">
                                        <tr>
                                            <td>
                                                <h:outputLabel for="idUsuario" value="ID de Usuario"/>
                                            </td>
                                            <td>
                                                <p:inputText id="idUsuario" size="30" value="#{login.idUsuario}" requiredMessage="#{msg.requiredField}" required="true" maxlength="15"
                                                             >
                                                    <p:ajax event="blur" process="@this" global="false"/>
                                                </p:inputText>
                                                <p:watermark for="idUsuario" value="Su Número de Identificación"/>
                                                <p:message for="idUsuario"/>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <h:outputLabel for="contrasena" value="Contraseña"/>
                                            </td>
                                            <td>
                                                <p:password id="contrasena" value="#{login.contrasena}" requiredMessage="#{msg.requiredField}" feedback="false" minLength="6" maxlength="15" required="true">
                                                    <p:ajax event="blur" process="@this" global="false"/>
                                                </p:password>
                                                <p:message for="contrasena"/>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td></td>
                                            <td>
                                                <h:panelGrid columns="2" border="0" cellpadding="5">
                                                    <p:commandButton value="Ingresar" ajax="false" process="@this" update="login-growl" action="#{login.autenticarUsuario}" />    
                                                </h:panelGrid>
                                            </td>

                                        </tr>

                                    </table> 

                                </p:panel>
                            </p:panel>
                        </h:form>
                    </center>
                </p:layoutUnit>

            </p:layout>



        </h:form>

    </h:body>
</html>

